import React, {Component} from 'react';

const ITEM_STATUS = {
    TODO: 'todo',
    DONE: 'done'
};

class Item extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: props.name,
            status: ITEM_STATUS.TODO
        };
    }

    onClick = (event) => {
        this.setState({
            status: this.state.status === ITEM_STATUS.DONE ? ITEM_STATUS.TODO : ITEM_STATUS.DONE
        });
    };

    render() {
        return (
            <div className={this.state.status} onClick={this.onClick}>
                {this.state.name}
            </div>
        );
    }
}

export default Item;
